<template>
  <div class="custom">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>

    <el-drawer v-model="visible" direction="rtl" size="80%">
      <el-table :data="orders" stripe border style="width: 100%">
        <el-table-column label="序号" width="80" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="商品名字" width="180" align="center">
          <template #default="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="100" align="center">
          <template #default="scope">
            <div v-html="orderStatus(scope.row.status)"></div>
          </template>
        </el-table-column>
        <el-table-column label="买家信息" width="220" align="center">
          <template #default="scope">
            <div class="flex" v-if="scope.row.buyer">
              <div class="avatar" v-if="scope.row.buyer.avatar"><img :src="scope.row.buyer.avatar"
                                                                     style="width: 40px;height: 40px;"></div>
              <div class="nickname">{{ scope.row.buyer.mobile }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="下单时间" width="180" align="center">
          <template #default="scope">
            {{ parseTime(scope.row.created) }}
          </template>
        </el-table-column>
        <el-table-column label="付款时间" width="180" align="center">
          <template #default="scope">
            <span v-if="scope.row.payTime>0">{{ parseTime(scope.row.payTime) }}</span>
          </template>
        </el-table-column>
      </el-table>


    </el-drawer>


  </div>
</template>
<script>
import TablePage from "@/components/TablePage";
import {orderStatus} from "../../utils/shopkeeper";
import {parseTime} from "../../utils";

export default {
  components: {TablePage},
  data() {
    return {
      typeList: [],
      query: [
        {
          type: 'text',
          label: '商品名',
          placeholder: '商品名搜索',
          key: 'title'
        },
        {
          type: 'text',
          label: '店铺名',
          placeholder: '店铺名搜索',
          key: 'shopName'
        }, {
          type: 'text',
          label: '手机号',
          placeholder: '买家手机号搜索',
          key: 'mobile'
        },
        {
          type: 'select',
          label: '状态',
          placeholder: '订单状态搜索',
          key: 'status',
          styles: {width: '150px'},
          options: [
            {label: '等待支付', value: '0'},
            {label: '待成团', value: '1'},
            {label: '已成团', value: '2'},
            {label: '成团失败', value: '3'},
            {label: '团购关闭', value: '-1'},
          ],

        },

        {
          type: 'date-picker',
          label: '下单时间',
          placeholder: '请选择时间范围',
          key: 'time'
        }
      ],
      columns: [
        {
          label: '#',
          prop: '$index',
          width: '70px'
        },
        {
          label: '店铺信息',
          type: 'render',
          width: '180px',
          render: (data) => {
            if (!data.shop) return ''
            return `<div class="flex flex-center">
                      <div class="avatar"><img src="${data.shop.logo}" style="width: 48px;height: 48px;border-radius: 50px"></div>
                      <div class="flex1" style="padding-left: 15px;text-align: left">${data.shop.name}</div>
                    </div>`
          }
        },
        {
          label: '商品图片',
          type: 'render',
          width: '100px',
          render: ({thumb}) => {
            return `<img src="${thumb}" style="width: 48px;height: 48px;">`
          }
        },
        {
          label: '商品标题',
          prop: 'title',
          width: '180px'
        },
        {
          label: '原价',
          width: '90px',
          prop: 'costPrice',
        },
        {
          label: '价格',
          width: '90px',
          prop: 'price',
        },

        {
          label: '成团人数',
          width: '90px',
          prop: 'groupNum',
        },
        {
          label: '已付人数',
          width: '90px',
          prop: 'buyNum',
        },
        {
          label: '团长',
          width: '180px',
          type: 'render',
          render: (data) => {
            if (!data.user) return ''
            return `<div>
                        <p>${data.user.mobile}</p>
                         <!--p>昵称:${data.user.nickname}</p -->
                </div>`
          }
        },
        {
          label: '状态',
          prop: 'typeName',
          type: 'render',
          width: '110px',
          render: (data) => {
            if (data.status == 0) return `<span class="el-tag el-tag--warning mx-1 is-round"><span class="el-tag__content">待付款</span></span>`
            else if (data.status == 1) return `<span class="el-tag el-tag--info mx-1 is-round"><span class="el-tag__content">待成团</span></span>`
            else if (data.status == -1) return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">团购关闭</span> </span>`
            else if (data.status == 3) return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">成团失败</span> </span>`
            else if (data.status == 2) return `<span class="el-tag el-tag--primary el-tag--dark mx-1 is-round"><span class="el-tag__content">已成团</span> </span>`
            else return data.status
          }
        },
        {
          label: '下单时间',
          width: '180px',
          prop: 'created',
          type: 'date'
        },
        {
          label: '结束时间',
          width: '180px',
          prop: 'expire',
          type: 'date'
        },
        {
          label: '操作',
          type: 'buttons',
          width: '150px',
          buttons: [
            {
              label: '查看',
              type: 'primary',
              styles: {},
              icon: 'Search',
              callback: (data) => {
                this.getOrderList(data.id)
              }
            }
          ]
        }
      ],
      data: {
        total: 0,
        list: [],
        page: 1,
        size: 40
      },
      visible: false,

      orders: []

    }
  },
  created() {
    this.initData();
  },
  methods: {
    orderStatus,
    parseTime,
    initData() {

    },
    onload(data) {
      this.data.page = data.page;
      this.data.size = data.size;
      Object.assign(data, {
        direction: 'DESC',
        properties: ['id']
      })
      this.$api.apiQuery('/api/manage/group-order/', data).then(res => {
        this.data.list = res.data;
        this.data.total = res.total;
      })
    },

    getOrderList(id) {
      this.$api.get('/api/manage/group-order/orders', {id: id}).then(res => {
        this.visible = true
        this.orders = res.data;
      })
    }

  }
}
</script>
<style lang="scss">
.description-label {
  width: 120px;
}
</style>